<template>
  <el-container>
    <el-header>
      <el-page-header content="报表设计" @back="onBack"></el-page-header>
      <div>
        <el-button type="primary" @click="exportData">提交</el-button>
        <el-button id="printPreviewBtn" style="display: none;" @click="printExcel()">打印预览</el-button>
    <el-button id="printExcelBtn" style="display: none;" plain
      @click="printLuckySheet">打印</el-button>
      </div>
    </el-header>
    <splitpanes @resize="resize" class="default-theme">
      <pane size="15">
        <el-scrollbar :height="h">
          <el-tree
            ref="group"
            class="menu"
            node-key="id"
            draggable
            :data="groupData"
            :default-expand-all="true"
            :highlight-current="true"
            :expand-on-click-node="false"
            :allow-drag="allowDrag"
            :allow-drop="allowDrop"
            @node-click="groupClick"
            @node-drag-start="onStart"
            :key="treeKey"
          >
            <template #default="{ node, data }">
              <span>
                <span style="margin-right: 2px">
                  <el-icon>
                    <component :is="data.icon" />
                  </el-icon>
                </span>
                <span>{{ node.label }}</span>
                <span v-if="data.position">{{
                  `(${data.position || ""}) `
                }}</span>
              </span>
            </template>
          </el-tree>
        </el-scrollbar>
      </pane>
      <pane size="60" style="position: relative">
        <div
          style="position: absolute; top: 0; width: 100%"
          id="luckysheet"
        ></div>
      </pane>
      <pane size="25">
        <el-scrollbar :height="h">
          <el-card>
            <el-tabs
              v-model="activeName"
              class="demo-tabs"
              @tab-click="handleClick"
            >
              <el-tab-pane label="单元格" name="first">
                <el-form :model="cellData" label-position="top" v-if="cellData">
                  <el-form-item>
                    <template #label>
                      <span style="color: #f56c6c; margin-right: 4px">*</span>
                      <span style="display: inline-block">单元格类型</span>
                    </template>
                    <el-select
                      style="width: 100%"
                      v-model="cellData.cellTag.tag"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in cellTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <div v-if="cellData.cellTag.tag !== 'el'">
                    <el-form-item label="">
                      <template #label>
                        <span style="color: #f56c6c; margin-right: 4px">*</span>
                        <span style="display: inline-block">单元格字段</span>
                      </template>
                      <el-input v-model="cellData.field"></el-input>
                    </el-form-item>
                    <el-form-item label="是否纵向合并">
                    <el-switch v-model="mc"/>
                  </el-form-item>
                  <el-form-item label="是否纵向合并">
                    <el-switch v-model="mr"/>
                  </el-form-item>
                  <el-form-item label="是否纵向合并">
                    <el-switch v-model="groupTotal"/>
                  </el-form-item>
                    <div v-if="cellData.cellTag.tag == 'dict'">
                      <el-form-item label="">
                        <template #label>
                          <span style="color: #f56c6c; margin-right: 4px"
                            >*</span
                          >
                          <span style="display: inline-block">字典分类</span>
                        </template>
                        <ts-select
                          v-model="cellData.cellTag.kind"
                          fileName="CodeKindReport"
                          :template="selectProps"
                        ></ts-select>
                      </el-form-item>
                      <el-form-item label="显示的字段名">
                        <el-input v-model="cellData.cellTag.label"></el-input>
                      </el-form-item>
                      <el-form-item label="值表达式">
                        <el-input v-model="cellData.cellTag.value"></el-input>
                      </el-form-item>
                    </div>
                    <el-form-item label="单元格数据类型">
                      <el-input v-model="cellData.cellTag.dt"></el-input>
                    </el-form-item>
                    <el-form-item
                      label="列条件表达式"
                      v-if="cellData.cellTag.tag === 'fcol'"
                    >
                      <el-input v-model="cellData.cellTag.ifcol"></el-input>
                    </el-form-item>
                    <el-form-item
                      label="行条件表达式"
                      v-if="cellData.cellTag.tag === 'frow'"
                    >
                      <el-input v-model="cellData.cellTag.ifrow"></el-input>
                    </el-form-item>
                    <div
                      v-if="
                        cellData.cellTag.tag == 'fcol' ||
                        cellData.cellTag.tag == 'frow'
                      "
                    >
                      <el-form-item label="数据集">
                        <el-select
                          v-model="cellData.cellTag.name"
                          placeholder="请选择"
                          @change="celldataSetChange"
                        >
                          <el-option
                            v-for="item in nodesArray"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="key值">
                        <el-input
                          v-model="cellData.cellTag.key"
                          disabled
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="拷贝最大行号">
                        <el-input-number
                          v-model="cellData.cellTag.copyLastRow"
                        />
                      </el-form-item>
                      <el-form-item label="是否结束循环">
                        <el-switch v-model="cellData.cellTag.end" />
                      </el-form-item>
                    </div>
                    <div v-if="cellData.cellTag.tag == 'frow'">
                      <el-form-item label="是否合并相同值的列">
                        <el-switch
                          v-model="cellData.cellTag.mc"
                          :active-value="1"
                          :inactive-value="0"
                        />
                      </el-form-item>
                    </div>
                    <el-form-item label="单元格html">
                      <el-input
                        type="textarea"
                        v-model="cellData.tagText"
                        disabled
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div v-if="cellData.cellTag.tag == 'el'">
                    <el-form-item label="单元格表达式">
                      <el-input v-model="cellData.v"></el-input>
                    </el-form-item>
                  </div>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="区域设置" name="second">
                <el-card>
                  <template #header>
                    <el-select
                      style="width: 60%; margin-right: 10px"
                      v-model="area"
                      placeholder="请选择"
                      size="small"
                      @change="regionChange"
                    >
                      <el-option
                        v-for="item in settingList"
                        :key="item.areaName"
                        :label="item.areaName"
                        :value="item.areaName"
                      />
                    </el-select>
                    <el-button
                      v-if="!editVisible"
                      :icon="Plus"
                      circle
                      size="small"
                      @click="addRegion"
                    />
                    <el-button
                      v-if="!editVisible"
                      :icon="Edit"
                      circle
                      size="small"
                      @click="editRegion"
                    />
                    <el-button
                      v-if="!editVisible && settingList.length > 0"
                      :icon="Delete"
                      circle
                      size="small"
                      @click="deleteRegion"
                    />
                    <el-button
                      v-if="editVisible"
                      :icon="Check"
                      circle
                      size="small"
                      @click="confirmRegion"
                    />
                    <el-button
                      v-if="editVisible"
                      :icon="Close"
                      circle
                      size="small"
                      @click="closeRegion"
                    />
                  </template>
                  <el-form
                    :model="setting"
                    label-position="top"
                    :disabled="!editVisible"
                    v-if="setting"
                  >
                    <el-form-item label="数据集">
                      <el-select
                        style="width: 60%; margin-right: 10px"
                        v-model="setting.name"
                        placeholder="请选择"
                        @change="dataSetChange"
                      >
                        <el-option
                          v-for="item in nodesArray"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="区域名称">
                      <el-input v-model="setting.areaName" disabled></el-input>
                    </el-form-item>
                    <el-row>
                      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label="起始列">
                          <el-input-number
                            v-model="setting.col[0]"
                            :min="0"
                          ></el-input-number>
                        </el-form-item>
                      </el-col>
                      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label="结束列">
                          <el-input-number
                            v-model="setting.col[1]"
                            :min="0"
                          ></el-input-number>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label="起始行">
                          <el-input-number
                            v-model="setting.row[0]"
                            :min="0"
                          ></el-input-number>
                        </el-form-item>
                      </el-col>
                      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label="结束行">
                          <el-input-number
                            v-model="setting.row[1]"
                            :min="0"
                          ></el-input-number>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-form-item label="迭代类型">
                      <el-select
                        v-model="setting.iterationType"
                        placeholder="请选择"
                        clearable
                      >
                        <el-option
                          v-for="item in iterationTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="key值">
                      <el-input v-model="setting.key" disabled></el-input>
                    </el-form-item>
                  </el-form>
                </el-card>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-scrollbar>
      </pane>
    </splitpanes>
  </el-container>
  <div id="print_html" ref="printTable" class="procedure" style="text-align: center;z-index: 0;"></div>
</template>
  
<script setup>
import { ref, onMounted, computed, nextTick, watch, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import LuckyExcel from "luckyexcel";
import draggable from "vuedraggable";
import tsSelect from '@/components/scSelect/index.vue'
import API from "@/api/model/luckysheet.js";
import { Plus, Edit, Delete, Check, Close } from "@element-plus/icons-vue";
import useTabs from "@/utils/useTabs";
import { deepClone } from "@/utils/arr";
import { analysis, tranferEl } from "./analysis.js";
import { check } from "./check.js";
import print from '@/utils/print'
const router = useRouter();
const props = defineProps({
  data: {
    type: Object,
    defalut: {},
  },
  jsonContent: {
    type: Object,
    defalut: {},
  },
});
const printTable =ref(null)
const configData = ref({});
const dragTargetNode = ref({}); //拖拽节点
const cellTypeList = ref([
  { value: "base", label: "普通字段" },
  { value: "dict", label: "字典" },
  { value: "img", label: "图片" },
  { value: "frow", label: "行循环" },
  { value: "fcol", label: "列循环" },
  { value: "el", label: "表达式" },
]);
const iterationTypeList = [
  { value: "frow", label: "行循环" },
  { value: "fcol", label: "列循环" },
];
const settingList = ref([]);
const selectProps = {value:'number',label:'number'}
const jsonData = ref({});
const activeName = ref("first");
const editVisible = ref(false);
const areaType = ref();
const cellData = ref();
const setting = ref();
const area = ref();
const row = ref();
const column = ref();
//树状图相关
const groupData = ref([]);
const group = ref(null);
const needInit = ref(false); //需要初始化对应位置
const treeKey = ref(0);
//节点数组
const nodesArray = ref([]);

const h = computed(() => {
  let height;
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if (!iOS) {
    height = window.innerHeight;
  } else {
    height = screen.height;
  }
  return height - 144;
});
const selectedDataSet = computed(() => {
  return settingList.value.map((obj) => obj.name);
});
watch(
  () => cellData.value,
  (newValue, oldValue) => {
    cellChange();
  },
  { deep: true }
);
// !!! create luckysheet after mounted
onMounted(() => {
  window.excelUpload = excelUpload;
  getInit();
});
onUnmounted(()=>{
  console.log('destroy')
  if(window.luckysheet){
    window.luckysheet.destroy();
  }
})
const onBack = () => {
  useTabs.close();
  router.back();
};
const resize = (e) => {
  luckysheet.resize();
};
const getInit = async () => {
  let res = await API.reportConfig.initReportDesigner.post({
    id: props.data.id,
  });
  if (res.code == 200) {
    if (res.bean.pageConfigFile.endsWith(".xlsx")) {
      getExcel(res.bean.pageConfigFile);
      needInit.value = true;
    } else {
      getJson(res.bean.pageConfigFile);
    }
    groupData.value = res.dataList;
    settingList.value = res.areaList;
    configData.value = res.configData;
    nodesArray.value = res.datasetList;
    // regionChange(area.value);
    nextTick(() => {
      group.value.setCurrentKey(groupData.value[0].id); // 默认选中节点第一个
    });
  }
};
const getExcel = async (path) => {
  let params = {
    downloadFileName: path,
    isDown: false,
  };
  let res = await API.excelConfig.uploadfile.post(params);
  const file = new window.File([res], "文件", { type: res.type });
  transformToLucky(file);
};
const getJson = async () => {
  let res = await API.excelConfig.loadImportRuleFile.post({
    id: props.data.id,
  });
  if (res.code == 200) {
    createLuckysheet(JSON.parse(res.jsonContent));
  }
};
const createLuckysheet = (val) => {
  if(window.luckysheet){
    window.luckysheet.destroy();
  }
  window.luckysheet.create({
    container: "luckysheet",
    data: val,
    lang: "zh",
    title: "例子",
    showinfobar: false,
    // showtoolbar: false, 
    // showstatisticBar: false, 
    // sheetBottomConfig: false, 
    showtoolbarConfig: {
      currencyFormat: false, //货币格式
      percentageFormat: false, //百分比格式
      numberDecrease: false, // '减少小数位数'
      numberIncrease: false, // '增加小数位数
      postil: false, //'批注'
      pivotTable: false, //'数据透视表'
    },
    allowUpdate: true,
    hook: {
      cellDragStop(cell, position) {
        dragStop(cell, position);
      },
      cellEditBefore: function (range) {
        console.log(range);
      },
      cellUpdateBefore: function (r, c, value, isRefresh) {
        // console.log("cellUpdateBefore", r, c, value, isRefresh);
      },
      cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
        if (!newValue.v && newValue.tagText && oldValue.v) {
          //初始化
          newValue.field = "";
          newValue.tagText = "";
          newValue.cellTag = { tag: "el" };
          newValue.key = "";
          groupData.value.forEach((ele) => {
            changeTreeNodeLabel("", oldValue.key + oldValue.field, ele);
          });
        }
      },
      rangeSelect: function (index, sheet) {},
      cellMousedown: function (cell, position) {
        row.value = position.r;
        column.value = position.c;
        if (cell == null) {
          cell = { cellTag: { tag: "el" } };
        } else {
          if (!cell.hasOwnProperty("cellTag")) {
            cell.cellTag = { tag: "el" };
          }
        }
        cellData.value = cell;
      },
    },
  });
  let sheet = document.getElementsByClassName("luckysheet")[0];
  sheet.style.height = h.value + "px";
};
const allowDrag = (node) => {
  if (node.data.nodeType === "table") {
    return false;
  }
  return true;
};
const allowDrop = (draggingNode, dropNode, type) => {
  return false;
};
const onStart = (node) => {
  if (!node) {
    return;
  }
  dragTargetNode.value = node.data;
};
const dragStop = (cell, position) => {
  if (dragTargetNode.value) {
    const { r, c } = position;
    row.value = r;
    column.value = c;
    let cellTag = "base";
    if (cell !== null && cell.cellTag && cell.cellTag.tag) {
      if (cell.cellTag.tag === "el") {
        cell.cellTag.tag = "base";
      }
      cellTag = cell.cellTag.tag;
    }
    let dataSource = tranferEl(
      settingList.value,
      row.value,
      column.value,
      cellTag
    );
    if (selectedDataSet.value.includes(dragTargetNode.value.parentId)) {
      if (
        dataSource === null ||
        dataSource.name !== dragTargetNode.value.parentId
      ) {
        ElMessage.warning({ message: "拖拽目标单元格不属于区域内" });
        return;
      }
    }
    cellData.value = deepClone(cell) || { cellTag: { tag: "base" } };
    if (!cellData.value.hasOwnProperty("cellTag")) {
      cellData.value.cellTag = { tag: "base" };
    }
    cellData.value.field = dragTargetNode.value.id;
    cellData.value.key = dragTargetNode.value.recordKey;
    luckysheet.setRangeShow([
      { row: [row.value, row.value], column: [column.value, column.value] },
    ]);
  }
};
const changeTreeNodeLabel = (position, id, tree) => {
  if (tree.position === position) {
    tree.position = "";
  }
  if (tree.recordKey + tree.id === id) {
    tree.position = position;
    treeKey.value += 1;
    return;
  }
  // 如果没有匹配，递归检查每个子节点
  if (tree.children) {
    for (let i = 0; i < tree.children.length; i++) {
      changeTreeNodeLabel(position, id, tree.children[i]);
    }
  }
};
const excelUpload = (file) => {
  if (file == null || file == undefined) {
    alert("请导入");
    return;
  }
  let suffixArr = file.name.split("."),
    suffix = suffixArr[suffixArr.length - 1];
  if (suffix != "xlsx") {
    alert("请上传excel文件");
    return;
  }
  transformToLucky(file);
};
const transformToLucky = (file) => {
  LuckyExcel.transformExcelToLucky(file, function (exportJson, luckysheetfile) {
    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
      alert("不支持xls文件");
      return;
    }
    jsonData.value = exportJson;
    createLuckysheet(exportJson.sheets);
  });
};
//上传
const exportData = async () => {
  settingList.value.forEach((item) => {
    if (item.iterationType) {
      let cellData = luckysheet.getSheetData([0])[item.row[1]][item.col[1]];
      cellData.tagText = cellData.tagText + "</" + item.iterationType + ">";
      luckysheet.setCellValue(item.row[1], item.col[1], cellData);
    }
  });
  let param = {
    jsonContent: JSON.stringify(luckysheet.getAllSheets()),
    id: props.data.id,
    areaList: settingList.value,
    datasetTree: groupData.value,
  };
  console.log(luckysheet.getAllSheets())
  let res = await API.reportConfig.saveReportTemplateToFile.post(param);
  if (res.code == 200) {
    ElNotification.success({
      title: "",
      message: "保存成功！",
      duration: 2000,
    });
    useTabs.close();
    router.back();
  }
};

const cellChange = (val) => {
  if (check(cellData.value) === true) {
    let dataSource = tranferEl(
      settingList.value,
      row.value,
      column.value,
      cellData.value.cellTag
    ) || { key: cellData.value.key };
    cellData.value.key = dataSource.key;
    cellData.value.v =
      "${" + cellData.value.key + "." + cellData.value.field + "}";
    cellData.value.m =
      "${" + cellData.value.key + "." + cellData.value.field + "}";
    cellData.value.tagText = analysis(cellData.value, dataSource.key);
    luckysheet.setCellValue(row.value, column.value, cellData.value);
    groupData.value.forEach((ele) => {
      changeTreeNodeLabel(
        String.fromCharCode(row.value + 65) + (column.value + 1),
        dataSource.key + cellData.value.field,
        ele
      );
    });
    dragTargetNode.value = null;
  }
};
//修改区域设置
const editRegion = () => {
  editVisible.value = true;
  areaType.value = "edit";
};
//删除区域
const deleteRegion = () => {
  ElMessageBox.confirm("确定要删除该区域吗", {
    type: "info",
    closeOnClickModal: false,
    center: true,
    confirmButtonText: "确定",
  })
    .then(() => {
      settingList.value.splice(
        settingList.value.findIndex((obj) => obj.name === setting.value.name),
        1
      );
      area.value = settingList.value[0].areaName;
      regionChange(area.value);
    })
    .catch(() => {});
};
const addRegion = () => {
  setting.value = {
    areaName: "",
    row: [],
    col: [],
    name: "",
    key: "",
    iterationType: "",
    dt: "",
  };
  areaType.value = "add";
  editVisible.value = true;
};
const confirmRegion = () => {
  if (areaType.value === "add") {
    settingList.value.push(setting.value);
  } else {
    let index = settingList.value.findIndex(
      (ele) => ele.areaName === area.value
    );
    settingList.value[index] = setting.value;
  }
  editVisible.value = false;
  luckysheet.setRangeShow([
    { row: setting.value.row, column: setting.value.col },
  ]);
};
const closeRegion = () => {
  editVisible.value = false;
  if (settingList.value.length > 0) {
    area.value = settingList.value[0].areaName;
    regionChange(area.value);
  } else {
    setting.value = {
      areaName: "",
      row: [],
      col: [],
      name: "",
      key: "",
      iterationType: "",
      dt: "",
    };
  }
};
//更换区域
const regionChange = (val) => {
  setting.value = deepClone(
    settingList.value.find((item) => {
      return item.areaName == val;
    })
  );
  luckysheet.setRangeShow([
    { row: setting.value.row, column: setting.value.col },
  ]);
};
const dataSetChange = (val) => {
  let obj = nodesArray.value.find((item) => item.value === val);
  setting.value.areaName = obj.label;
  setting.value.key = obj.recordKey;
};
const celldataSetChange = (val) => {
  cellData.value.cellTag.key = nodesArray.value.find(
    (item) => item.value === val
  ).recordKey;
};
// 打印预览事件实现：
 const  printExcel =async()=> {
    printSheet();
}
/** 打印操作：自动选中打印区域，并生成打印截图，进行打印 */
const printSheet=()=> {
    document.querySelector('#print_html').style = "display:block";
    window.luckysheet.hideGridLines();
    //获取当前选中区域
    let currentSelected = luckysheet.getRange()
    console.log(currentSelected)
    //如果当前选中区只是一个单元格，则认为选取无效。
    if (currentSelected[0] != null && (currentSelected[0].row[1] - currentSelected[0].row[0] >= 1 || currentSelected[0].column[1] - currentSelected[0].column[0] >= 1)) {
        // 将打印区域生成base64图片（*将生成的base64编码复制粘贴到浏览器地址框，是可以预览图片样式的），生成后执行的后续打印操作，取用匿名委托函数做为参数传入
        luckysheet.getScreenshotNew((imgSrc) => {
            window.luckysheet.showGridLines();
            // * Lodop中的ADD_PRINT_IMAGE，也可以直接输出base64码图片，不用加img标签（如果加了img标签，会被当做超文本对待，受浏览器引擎解析的影响）
            let $img = `<img src=${imgSrc} style="max-width: 90%;" />`
                document.querySelector('#print_html').innerHTML = $img;
            document.getElementById('printExcelBtn').click();
            setTimeout(() => {
                document.querySelector('#print_html').style = "display:none";
            }, 1000);
        });
    }
    else {
        // 获取打印区域的行列
        let RowColumn = getPrintSheetArea();
        // 因需要打印左边的边框，需重新设置第一列
        // RowColumn.column[0] = 0;
        // 进行选区操作
        luckysheet.setRangeShow(RowColumn);
        console.log(RowColumn)
        // 将打印区域生成base64图片（*将生成的base64编码复制粘贴到浏览器地址框，是可以预览图片样式的），生成后执行的后续打印操作，取用匿名委托函数做为参数传入
        luckysheet.getScreenshotNew((imgSrc) => {
          console.log(imgSrc)
            window.luckysheet.showGridLines();
            // * Lodop中的ADD_PRINT_IMAGE，也可以直接输出base64码图片，不用加img标签（如果加了img标签，会被当做超文本对待，受浏览器引擎解析的影响）
            let $img = `<img src=${imgSrc} style="max-width: 90%;" />`
                document.querySelector('#print_html').innerHTML = $img;
            document.getElementById('printExcelBtn').click();
            setTimeout(() => {
                document.querySelector('#print_html').style = "display:none";
            }, 100);
        });
    }
 
}
// 获取打印区域（即表格中有内容、非空白的区域）（用row，column数组表示）
const getPrintSheetArea=()=> {
    const sheetData = luckysheet.getSheetData();
    let objRowColumn = {
        row: [0, 0], //行
        column: [0, 0], //列
    };
    // * item是行、index是行索引、it是一行里的一格、itemIndex是这一格在这一行里的列索引
    sheetData.forEach((item, index) => {
        //行数
        item.forEach((it, itemIndex) => {
            if (it !== null) {
                if (objRowColumn.row[1] < index) {
                    objRowColumn.row[1] = index; //row第二位
                }
                if (objRowColumn.column[1] < itemIndex) {
                    objRowColumn.column[1] = itemIndex; //column第二位
                }
            }
        });
    });
    return objRowColumn;
}
const printLuckySheet = ()=>{
  console.log(printTable.value)
  print(printTable.value)
}
</script>
  
<style  scoped>
#luckysheet {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100%;
  left: 0px;
  top: 30px;
  bottom: 0px;
}
#uploadBtn {
  font-size: 16px;
}

#tip {
  position: absolute;
  z-index: 1000000;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
}
</style>
  